revision:
Current date in MM/DD/YYYY format
<div id="div1">
<p>Current date in MM/DD/YYYY format</p>
<button type=“button”>Click to get current date</button>
<div>the current date is: </div>
</div>
<script>
$(document).ready(function(){
var currdate = new Date();
var currdate= (currdate.getMonth()+ 1) + ' / ' + currdate.getDate() + ' / ' + currdate.getFullYear();
$("#div1 button").click(function(){
$('#div1 div').append(currdate)
});
});
</script>
<div id="div2">
<button>Click to get current time</button>
<div>The current time is: </div>
</div>
$(document).ready(function(){
var currtime = new Date();
var currtime = (currtime.getHours() + ": "+ currtime.getMinutes() + ": " + currtime.getSeconds());
$("#div2 button").click(function(){
$('#div2 div').append(currtime)
});
});
<div id="div3">
<input type="button" id="btn1" value="get date (DD/MM/YYYY)"/>
<p id="printDate"></p>
<input type="button" id="btn2" value="get date (MM/DD/YYYY)"/>
<p id="printDate1"></p>
<input type="button" id="btn3" value="get date (DD MON YYYY)"/>
<p id="printDate2"></p>
</div>
<style>
input[type="button"]{display: flex; flex-flow: column wrap;margin:1vw; font-size: 0.6vw; width: 10vw;
height: 2vw; justify-content: center; align-items: center; color: darkgreen; background-color: orange;}
</style>
<script>
$(document).ready(function(){
var date=new Date();
$("#btn1").click(function(){
var val=date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
$("#printDate").text(val);
});
$("#btn2").click(function(){
var val=(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear();
$("#printDate1").text(val);
});
$("#btn3").click(function(){
var months=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
var val=date.getDate()+" "+months[date.getMonth()]+" "+date.getFullYear();
$("#printDate2").text(val);
});
});
</script>
<div id="div3">
<section class="container">
<div class="clock">
<div id="Date">Thursday 6 August 2020</div>
<ul>
<li id="hours">10</li>
<li id="point">:</li>
<li id="min">13</li>
<li id="point">:</li>
<li id="sec">03</li>
</ul>
</div>
</section>
</div>
<style>
.container {width: 35vw; margin: 0 auto; overflow: hidden;}
.clock {width: 30vw; margin: 0 auto; padding: 1vw; border: 0.1vw solid blue; color: coral; }
#Date { font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size: 2vw; text-align: center;
text-shadow: 0 0 5px #00c6ff;}
ul { width: 30vw; margin: 0 auto; padding: 0vw; list-style: none; text-align: center;}
ul li {display: inline; font-size: 5vw; text-align: center; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
text-shadow: 0 0 5px #00c6ff;}
#point {position: relative; -moz-animation: mymove 1s ease infinite; -webkit-animation: mymove 1s ease infinite;
animation: mymove 1s ease infinite; padding-left: 0.1vw; padding-right: 0.1vw;}
@-webkit-keyframes mymove {
0% { opacity: 1.0;text-shadow: 0 0 2vw #00c6ff;}
50% {opacity: 0; text-shadow: none;}
100% {opacity: 1.0; text-shadow: 0 0 2vw #00c6ff; }
}
@-moz-keyframes mymove {
0% { opacity: 1.0;text-shadow: 0 0 2vw #00c6ff;}
50% {opacity: 0; text-shadow: none;}
100% {opacity: 1.0; text-shadow: 0 0 2vw #00c6ff; }
}
@keyframes mymove {
0% { opacity: 1.0;text-shadow: 0 0 2vw #00c6ff;}
50% {opacity: 0; text-shadow: none;}
100% {opacity: 1.0; text-shadow: 0 0 2vw #00c6ff; }
}
</style>
<script>
$(document).ready(function () {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December"];
var dayNames = ["Sunday, ", "Monday, ", "Tuesday, ", "Wednesday, ", "Thursday, ", "Friday, ", "Saturday, "]
var newDate = new Date();
newDate.setDate(newDate.getDate());
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()]
+ ' ' + newDate.getFullYear());
setInterval(function () {
var seconds = new Date().getSeconds();
$("#sec").html((seconds < 10 ? "0" : "") + seconds);
}, 1000);
setInterval(function () {
var minutes = new Date().getMinutes();
$("#min").html((minutes < 10 ? "0" : "") + minutes);
}, 1000);
setInterval(function () {
var hours = new Date().getHours();
$("#hours").html((hours < 10 ? "0" : "") + hours);
}, 1000);
});
</script>
<div id="div4">
<div id="demo1" ></div>
<div id="demo2" ></div>
</div>
<style>
#demo1{Width:10vw;float:left;margin:0.8vw;}
#demo2{width:50%;float:left;margin:0.8vw;}
.rapClock{background:radial-gradient(#fff 10%,#ccc 62%,#000 65%,#a00 70%,black 100%);cursor:pointer;
font-family:'Comic Sans MS',cursive,sans-serif; position:relative; border-radius:50%; box-shadow:inset
-2px -2px 4px rgba(0,0,0,8),inset 2px 2px 4px rgba(255,255,255,8),2px 2px 4px rgba(0,0,0,8),0px 0px 4px
black; text-align:center; text-shadow:0 0 2px #fff; -webkit-user-select:none; -moz-user-select:none;
user-select:none;}
.rapClockCaption{padding-top:25%;}
.rapClockHours{top:50%; left:50%; width:2%; height:8%; position:absolute; background-color:#000;}
.rapClockNumbers{top:50%; left:50%; position:absolute;}
.rapClockHands{top:50%; left:50%; position:absolute; border-radius:50% 50% 50% 50% / 90% 90% 10% 10%;}
.rapClockS{width:2%; height:46%; z-index:3; background-color:#a00;}
.rapClockM{width:3%; height:34%; z-index: 2; background-color:#222;}
.rapClockH{width:5%; height:25%;z-index:1; background-color:#222;}
</style>
<script>
$(document).ready(function(){
$('#demo1').jsRapClock();
$('#demo2').jsRapClock({
caption:'London',
clockNumbers:false,
clock:1,
stopwatch:10,
shiftH:1,
shiftM:30,
shiftS:20
});
});
$(window).resize(function(){
$('.rapClock').each(function(){
this.Render();
});
});
(function($){
$.fn.jsRapClock = function(options){
return this.each(function(){
this.opt = $.extend({
caption: '',
clockNumbers: true,
clock: 0,
stopwatch: 0,
pitch: 1.0,
rate: 0.8,
shiftH: 0,
shiftM: 0,
shiftS: 0
}, options);
let base = this;
this.synth = window.speechSynthesis;
this.timerId = 0;
this.sec = 0;
$(this).bind({
click:function(e){
if (base.opt.stopwatch) {
if (base.timerId) {
clearInterval(base.timerId);
base.Speak('stopwatch off');
base.timerId = 0;
}else{
base.sec = 0;
base.Speak('stopwatch on');
base.timerId = setInterval(function () {
base.sec += base.opt.stopwatch;
let t = base.sec;
let s = t % 60;
t = Math.floor(t / 60);
let m = t % 60;
h = Math.floor(t / 60);
base.SpeakTimer(h, m, s);
}, base.opt.stopwatch * 1000);
}
} else if (base.opt.clock) {
base.Speak('clock off');
base.opt.clock = 0;
} else {
base.Speak('clock on');
base.opt.clock = 1;
}
}
});
this.Render = function(){
$(this).empty();
var w = $(this).width();
$(this).addClass('rapClock').height(w);
if (this.opt.caption)
$('<div>').addClass('rapClockCaption').css({ 'font-size': (w * 0.08) + 'px' }).text(this.opt.caption).appendTo(this);
for (var n = 0; n < 12; n++)
if (this.opt.clockNumbers)
$('<div>').text((n + 5) % 12 + 1).addClass('rapClockNumbers').css({ 'font-size': (w * 0.1) + 'px',
transform: 'translate(-50%,-50%) rotate(' + (n * 30) + 'deg) translate(0,' + (w * 0.36) + 'px)
rotate(-' + (n * 30) + 'deg)' }).appendTo(this);
else
$('<div>').addClass('rapClockHours').css('transform',
'translate(-50%,-50%) rotate(' + (n * 30) + 'deg) translate(0,500%)').appendTo(this);
$('<div>').addClass('rapClockHands rapClockH').appendTo(this);
$('<div>').addClass('rapClockHands rapClockM').appendTo(this);
$('<div>').addClass('rapClockHands rapClockS').appendTo(this);
this.ShowTime();
}
this.ShowTime = function(){
let d = new Date();
let t = d.getTime() + this.opt.shiftH * 3600000 + this.opt.shiftM * 60000 + this.opt.shiftS * 1000;
d.setTime(t);
let h = d.getHours();
let m = d.getMinutes();
let s = d.getSeconds();
$('.rapClockH', this).css('transform', 'translate(-50%,-50%) rotate(' + (h * 30 + m / 2) + 'deg) translate(0,-40%)');
$('.rapClockM', this).css('transform', 'translate(-50%,-50%) rotate(' + (m * 6) + 'deg) translate(0,-45%)');
$('.rapClockS', this).css('transform', 'translate(-50%,-50%) rotate(' + (s * 6) + 'deg) translate(0,-30%)');
if (this.opt.clock && !this.timerId)
if ((!(m % this.opt.clock)) && !s)
this.SpeakTime(h, m);
}
this.Speak = function (s) {
let utterThis = new SpeechSynthesisUtterance(s);
utterThis.pitch = this.opt.pitch;
utterThis.rate = this.opt.rate;
utterThis.lang = 'en-US';
this.synth.speak(utterThis);
}
this.SpeakTime = function (h, m) {
if (!m)
this.Speak(h + 'o’clock');
else
this.Speak(m + ' past ' + h);
}
this.SpeakTimer = function (h, m, s) {
let t = '';
if (h)
t = h + 'hours ';
if (m)
t += m + ' minutes ';
if (s)
t += s + 'seconds';
this.Speak(t);
}
this.Render();
setInterval(function () {
base.ShowTime();
}, 1000);
});
}
})(jQuery);
</script>